<template>
  <div>
    <h2>订单管理</h2>
    <el-table :data="orders" border>
      <el-table-column prop="orderId" label="订单号" />
      <el-table-column prop="userId" label="用户ID" />
      <el-table-column prop="status" label="订单状态">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="viewOrder(scope.row)">查看</el-button>
          <el-button type="danger" @click="confirmDeleteOrder(scope.row.orderId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui';

export default {
  data() {
    return {
      orders: [
        { orderId: 1, userId: '用户1', status: '已发货' },
        { orderId: 2, userId: '用户2', status: '待发货' },
      ],
    };
  },
  methods: {
    viewOrder(order) {
      console.log('查看订单', order);
    },
    confirmDeleteOrder(orderId) {
      MessageBox.confirm('确定要删除此订单吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteOrder(orderId);
      }).catch(() => {
        console.log('取消删除');
      });
    },
    deleteOrder(orderId) {
      console.log('删除订单', orderId);
      // 在这里执行删除操作，并更新订单列表
    },
    getStatusType(status) {
      return status === '已发货' ? 'success' : 'warning'; // 根据状态返回不同类型
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>
